<template>
  <div>
    <el-container>
      <el-header>
        <h1>志愿活动反馈管理</h1>
      </el-header>

      <el-main>
        <!-- 筛选条件 -->
        <el-card class="box-card">
          <h2>筛选条件</h2>
          <el-form :model="filters" inline>
            <el-form-item label="活动类型">
              <el-select
                v-model="filters.typeId"
                @change="fetchEvents"
                placeholder="请选择活动类型"
                clearable
              >
                <el-option
                  v-for="type in eventTypes"
                  :key="type.id"
                  :label="type.type"
                  :value="type.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-select
                v-model="filters.eventId"
                placeholder="请选择活动"
                clearable
              >
                <el-option
                  v-for="event in events"
                  :key="event.id"
                  :label="event.name"
                  :value="event.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="applyFilters">查询</el-button>
              <el-button @click="resetFilters">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 反馈记录查看 -->
        <el-card class="box-card">
          <h2>反馈记录</h2>
          <el-table :data="feedbackList" border style="width: 100%">
            <el-table-column prop="userName" label="用户名" width="150" />
            <el-table-column prop="eventName" label="活动名称" width="200" />
            <el-table-column prop="content" label="反馈内容" />
            <el-table-column prop="rating" label="评分" width="100" />
            <el-table-column
              prop="createdAt"
              label="提交时间"
              :formatter="formatDate"
              width="200"
            />
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchModel.pageNo"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </el-card>

        <!-- 反馈统计 -->
        <el-card class="box-card">
          <h2>反馈统计</h2>
          <el-row>
            <el-col :span="12">
              <el-card>
                <h3>评分分布</h3>
                <div id="rating-chart" style="height: 300px"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <h3>总体统计</h3>
                <p><strong>平均评分：</strong> {{ averageRating }}</p>
                <p><strong>参与人数：</strong> {{ totalParticipants }}</p>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import feedbackApi from "@/api/feedbackManage"; // 引入封装好的反馈管理 API
import * as echarts from "echarts";

export default {
  data() {
    return {
      filters: {
        eventId: null,
        typeId: null,
      },
      searchModel: {
        pageNo: 1,
        pageSize: 10,
        eventName: null,
        userName: null,
      },
      feedbackList: [], // 反馈记录列表
      total: 0, // 总记录数
      events: [], // 活动列表
      eventTypes: [], // 活动类型列表
      averageRating: 0, // 平均评分
      totalParticipants: 0, // 参与人数
    };
  },
  methods: {
    formatDate(row, column, cellValue) {
      if (!cellValue) return ""; // 处理空值
      return cellValue.replace("T", " "); // 替换 T 为空格
    },
    // 获取反馈记录
    fetchFeedbackList() {
      feedbackApi.getFeedbackList(this.searchModel).then((response) => {
        this.feedbackList = response.data.list;
        this.total = response.data.total;
      });
    },
    // 获取反馈统计
    fetchFeedbackStats() {
      feedbackApi.getFeedbackStats(this.filters).then((response) => {
        const { ratingDistribution, averageRating, totalParticipants } =
          response.data;

        // 更新图表
        const chart = echarts.init(document.getElementById("rating-chart"));
        chart.setOption({
          tooltip: { trigger: "item" },
          xAxis: {
            type: "category",
            data: ratingDistribution.map((r) => r.rating),
          },
          yAxis: { type: "value" },
          series: [
            {
              data: ratingDistribution.map((r) => r.count),
              type: "bar",
            },
          ],
        });

        // 更新统计数据
        this.averageRating = averageRating;
        this.totalParticipants = totalParticipants;
      });
    },
    // 获取活动列表
    fetchEvents() {
      feedbackApi.getEvents().then((response) => {
        console.log(response);
        this.events = response.data;
      });
    },
    // 获取活动类型列表
    fetchEventTypes() {
      feedbackApi.getEventTypes().then((response) => {
        this.eventTypes = response.data;
      });
    },
    // 应用筛选条件
    applyFilters() {
      this.fetchFeedbackStats();
    },
    // 重置筛选条件
    resetFilters() {
      this.filters = { eventName: null, eventType: null };
      this.fetchFeedbackStats();
    },
    // 处理分页大小改变
    handleSizeChange(newSize) {
      this.searchModel.pageSize = newSize;
      this.searchModel.pageNo = 1; // 重置为第一页
      this.fetchFeedbackList();
    },
    // 处理页码改变
    handleCurrentChange(newPage) {
      this.searchModel.pageNo = newPage;
      this.fetchFeedbackList();
    },
  },
  mounted() {
    this.fetchEvents(); // 获取活动列表
    this.fetchEventTypes(); // 获取活动类型列表
    this.fetchFeedbackList(); // 获取反馈记录
    this.fetchFeedbackStats(); // 获取反馈统计
  },
};
</script>



<style scoped>
.box-card {
  margin-bottom: 20px;
}

.el-header {
  background-color: #409eff;
  color: white;
  text-align: center;
  line-height: 25px;
  font-size: 18px;
}

.el-main {
  padding: 20px;
}

h2 {
  font-size: 16px;
  margin-bottom: 10px;
}

#rating-chart {
  margin-top: 20px;
}
</style>
